import React, { Component } from 'react'
import './mytabs.less'
export default class Mytabs extends Component {
    state={
        idx:''
    }
    componentDidMount(){
        this.setState({
            idx:this.props.defaultActiveKey
        })
    }
    selectTab(key){
        this.setState({
            idx:key
        })
        this.props.onChange(key)
    }
    render() {
        return (
            <div className='mytabs'>
               {/* <div>
                   <div>tab1</div>
                   <div>tab2</div>
                   <div>tab3</div>
               </div>
               <div>
                   <div>tab1 content</div>
                   <div>tab2 content</div>
                   <div>tab3 content</div>
               </div> */}
               <div className='mytabs-title'>
                    {React.Children.map(this.props.children,(v,i)=>{
                        return <div 
                                    key={i}
                                    className={
                                        v.key ===this.state.idx
                                        ?
                                        'curTab mytabs-title-item'
                                        :
                                        'mytabs-title-item'
                                    }
                                    onClick={this.selectTab.bind(this,v.key)}
                                >
                                    
                                    <span className='title-span'>
                                        {v.props.tab}
                                    </span>
                                </div>
                    })}
               </div>
               <div>
               {React.Children.map(this.props.children,(v,i)=>{
                        return <div 
                                    key={i}
                                    className={
                                        v.key === this.state.idx
                                        ?
                                        'active tab-content-item'
                                        :
                                        'tab-content-item'
                                    }
                                >
                                    {v.props.children}
                                </div>
                    })}
               </div>
            </div>
        )
    }
}
